<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <title>Comunicación de semáforos</title>
    </h:head>

    <h:body>
      <div id=" conteiner">
             <div id="top" class="ui-widget-header ui-corner-all">
                <ui:insert name="top">Sistema de gestión de semáforos</ui:insert>
            </div>

            <div id ="menu">
                <h:form>  
                    <p:menubar>
                        <p:submenu label="Agentes"> 
                            <p:menuitem value="Crear Agentes" url="#{appBean.basePath}template.xhtml"></p:menuitem>
                            <p:menuitem value="Gestion de semáforos" url="#{appBean.basePath}agente/index.xhtml"></p:menuitem>
                            <p:menuitem value="Mensajes" action="#{loginBean.ejecutarAgentes()}"></p:menuitem>
                        </p:submenu>
                        
                        <p:submenu label="Usuarios">
                            <p:menuitem value="Gestión de Usuarios" url="#{appBean.basePath}usuario/index.xhtml"></p:menuitem>
                        </p:submenu>
                        
                        <p:submenu label="Ayuda"> </p:submenu>
                        <p:menuitem value="Salir" actionListener="#{loginBean.logout}" icon="ui-icon-close" > </p:menuitem>

                    </p:menubar>
                </h:form>
            </div>
            
            
         <div id="content" class="center_content ui-widget iu-widget-content ui-corner-all">
                <ui:insert name="content">
                    <h:head>
                        <link type="text/css" rel="stylesheet" href="../themes/primefaces-bluesky/theme.css"/>
                        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
                    </h:head>
                    <h:body>
                        <p:growl id="messages" showDetail="true" />

                        <p:gmap id="gmap" center="-4.0003539,-79.2048469" zoom="17" type="ROADMAP" style="width:100%;height:800px"
                                model="#{addMarkersView.emptyModel}"  widgetVar="map" >
                         <p:ajax event="pointSelect" listener="#{addMarkersView.mostrarpanel}" update="messages,:formCreate:dialogCreate" />
                        </p:gmap>

                        
                        <h:form prependId="false" id="formCreate">
                                <p:dialog id="dialogCreate" widgetVar="dlg" showEffect="fade" closable="false" visible="#{addMarkersView.abrirCreate}"
                                          header="Crear agente">
                                  <p:panelGrid  id ="display" columns="1"  style=" margin:0 auto;">

                                      <p:outputLabel value="Código:" />
                                      <p:inputText value="#{addMarkersView.agente.ageCodigo}" size="40" 
                                                   required="true" requiredMessage="Ingrese el código"/>

                                      <p:outputLabel value="Dirección:" />
                                      <p:inputText value="#{addMarkersView.agente.ageDireccion}" size="40"
                                                   required="true" requiredMessage="Ingrese la dirección"/>
                                      
                                      <p:outputLabel value="Tipo de luz:" />
                                      <p:selectOneMenu value="#{addMarkersView.agente.ageTipoluz}">
                                        <f:selectItems value="#{addMarkersView.tipoLuz}"></f:selectItems>
                                      </p:selectOneMenu>
                                      
                                      <p:outputLabel value="Sentido:" />
                                      <p:selectOneMenu value="#{addMarkersView.agente.ageSentido}">
                                        <f:selectItems value="#{addMarkersView.tipoSentido}"></f:selectItems>
                                      </p:selectOneMenu>
                                      
                                      <p:outputLabel value="Observación:" />
                                      <p:inputTextarea value="#{addMarkersView.agente.ageObservacion}" style="width: 97%"/>
                                  </p:panelGrid>
                                  <p:panelGrid  id ="displayCreate" columns="2"  style=" margin:0 auto;">
                                      <p:commandButton id ="btnGuardar" update=":gmap, :formCreate, :messages" process=":formCreate"
                                                       value="Guardar" actionListener="#{addMarkersView.addMarker()}">
                                      </p:commandButton>

                                      <p:commandButton id ="btnCancelar2" update=":formCreate" process="@this"
                                                       value="Cancelar" action="#{addMarkersView.setAbrirCreate(false)}">
                                      </p:commandButton>
                                  </p:panelGrid>

                                <h:inputHidden id="lat" value="#{addMarkersView.lat}" />
                                <h:inputHidden id="lng" value="#{addMarkersView.lng}" />
                                </p:dialog>
                            </h:form>
                        

                        <script type="text/javascript">
                                            var currentMarker = null;
                                            var iconoSemaforo = 'http://www.kitlatren.com/tienda/images/semaforo.png';

                                            function handlePointClick(event) {
                                                if (currentMarker === null) {
                                                    document.getElementById('lat').value = event.latLng.lat();
                                                    document.getElementById('lng').value = event.latLng.lng();

                                                    currentMarker = new google.maps.Marker({
                                                        position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
                                                        icon: iconoSemaforo
                                                    });

//                                                    PF('map').addOverlay(currentMarker);
                                                    PF('dlg').show();
                                                }
                                            }

//                                            function markerAddComplete() {
//                                                var title = document.getElementById('Agente');
//                                                currentMarker.setTitle(title.value);
//                                                title.value = "";
//
//                                                currentMarker = null;
//                                                PF('dlg').hide();
//                                            }
//
//                                            function cancel() {
//                                                PF('dlg').hide();
//                                                currentMarker.setMap(null);
//                                                currentMarker = null;
//
//                                                return false;
//                                            }

//                                            function agregarMarcadores() {
//                                                PF('dlg').hide();
//                                                currentMarker.setMap(null);
//                                                currentMarker = null;
//                                                return false;
//                                            }


                                            var markers = Array();
                                            var infowindowActivo = false;
//                                            function setGoogleMarkers(map) {
//                                                var misPuntos = new Array();
//                                                misPuntos[0] = ["Semáforo 1", "-3.9699757626368215", "-79.20295000076294", "iconoSemaforo", "<div>html</div>"];
//                                                misPuntos[1] = ["Semáforo 2", "-3.9723197364272633", "-79.20170545578003", "iconoSemaforo", "<div>html</div>"];
//                                                misPuntos[2] = ["Semáforo 3", "-3.9710781803628774", "-79.20586824417114", "iconoSemaforo", "<div>html</div>"];
//
//                                                for (var i = 0; misPuntos.length > i; i++) {
//                                                    var elPunto = misPuntos[i];
//                                                    var myLatLng = new google.maps.LatLng(elPunto[1], elPunto[2]);
//
//                                                    markers[i] = new google.maps.Marker({
//                                                        position: myLatLng,
//                                                        map: map,
//                                                        icon: eval(elPunto[3]),
//                                                        title: elPunto[0]
//                                                    });
//                                                    markers[i].infoWindow = new google.maps.InfoWindow({
//                                                        content: elPunto[4]
//                                                    });
//                                                    google.maps.event.addListener(markers[i], 'click', function() {
//                                                        if (infowindowActivo)
//                                                            infowindowActivo.close();
//                                                        infowindowActivo = this.infoWindow;
//                                                        infowindowActivo.open(map, this);
//                                                        document.write('Aquí acá');
//                                                    });
//                                                }
//                                            }
//
//                                            setGoogleMarkers(gmap);


                        </script>
                    </h:body>

                </ui:insert>
            </div> 
            <div id="bottom" class="ui-widget-header ui-corner-all">
                <ui:insert name="bottom">&copy; 2014</ui:insert>
            </div>
        </div>
        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if (args.loggetOut) {
                    location.href = args.ruta;
                }
            }
        </script>

    </h:body>

</html>
